import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { staticUrl } from '@/utils'
import { getUserCarCost } from '@/api/user'
import './index.scss'

const calendarIcon = staticUrl('/img/user/consume/calendar.png')

interface State {
  list: any
}
export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      list: []
    }
  }
  state: State
  private PER_PAGE: number = 6
  private MAX_PAGE: number = 1
  private currPage: number = 1
  private orderLoaded: boolean = false
  private isPageEnd: boolean = false
  componentDidMount() {
    this.getUserCarCostList()
  }

  getUserCarCostList(mode: string = 'init') {
    if (this.orderLoaded) return
    this.orderLoaded = true
    if (mode === 'init') {
      this.currPage = 1
      this.isPageEnd = false
    } else {
      this.currPage++
      this.isPageEnd = this.currPage > this.MAX_PAGE
      this.orderLoaded = false
    }
    if (this.isPageEnd) return
    let params: any = {
      page: this.currPage,
      perPage: this.PER_PAGE
    }
    Taro.showLoading({ title: '加载中' })
    getUserCarCost(params).then(res => {
      this.orderLoaded = false
      Taro.hideLoading()
      const data = res.data.data
      if (mode === 'init') {
        this.MAX_PAGE = Number(res.header['x-pagination-page-count']) || Number(res.header['X-Pagination-Page-Count'])
        this.setState({
          list: data
        })
      } else {
        const { list } = this.state
        this.setState({
          list: [...list, ...data]
        })
      }
    }).catch(e => {
      this.orderLoaded = false
      Taro.hideLoading()
    })
  }

  // 滚动加载
  scrollLoad(e) {
    this.getUserCarCostList('add')
  }


  render() {
    const { list } = this.state
    return (
      <ScrollView scrollY lowerThreshold={150} onScrollToLower={(e) => this.scrollLoad(e)} className='order-wrap'>
        <View>
          {
            list && list.map((v, vIndex) => {
              return (
                <View key={vIndex} className="order-item">
                  <View className='top'>
                    <Image className='calendar-icon' lazyLoad src={calendarIcon} ></Image>
                    <View className='info'>
                      <View className='time'>{v.day}</View>
                      <View className='address'>{v.storeName}&nbsp;&nbsp;&nbsp;&nbsp;{v.storeGreetKilometer === '' ? '0' : v.storeGreetKilometer}km</View>
                    </View>
                  </View>
                  <View className='cost-list'>
                    {
                      v.carCostList && v.carCostList.map((i, iIndex) => {
                        return (
                          <View className='cost-item' key={iIndex}>
                            <View className='order-no'><Text className='flex'>{i.orderNumber}</Text><View className='total-price'>实付：￥{i.paidMoneyTotal}</View></View>
                            {
                              i.item && i.item.map((item, itemIndex) => {
                                return (
                                  <View key={itemIndex} className="cost-goods">
                                    <View className='goods-name'>{item.goodsName}</View>
                                    <View className='goods-code flex'>({item.goodsCode})<View className='sales-number'>x{item.salesNumber}</View></View>
                                  </View>
                                )
                              })
                            }

                          </View>
                        )

                      })
                    }

                  </View>
                </View>
              )
            })
          }
          <View className="page-base">已经到底了~</View>
        </View>
      </ScrollView>
    )

  }
}
